<div th:fragment="html">
    <div id="trendDiv">
        <input type="text" class="form-control" id="trendSimSmfdId" v-model="trendSimMap.fundData.id" style = "display:none">
        <input type="text" class="form-control" id="trendSimSmfdCode" v-model="trendSimMap.fundData.code" style = "display:none">
        <input type="text" class="form-control" id="trendSimSmsd" v-model="trendSimMap.startDate" style = "display:none">
        <input type="text" class="form-control" id="trendSimSmed" v-model="trendSimMap.endDate" style = "display:none">
        <input type="text" class="form-control" id="trendSimSmmv" v-model="trendSimMap.maVal" style = "display:none">

        <input type="text" class="form-control" id="trendIsCurrency" v-model="trendIsCurrency" style = "display:none">
        <button type="button" class="btn btn-success" id="trendInit" @click="init" style="display:none">初始化</button>

        <br>
        <table class="inputTable ">
            <tr>
                <td width="10%"></td>
                <td width="10%" align="right">
           				<span data-toggle="tooltip" data-placement="top" title="当前值大于均线，说明上升趋势来了，就可以购买，或者再稍等等，比均线多 5% 再下手，那么购买阈值就是 1.05 ">
            				购买阈值:<span class="glyphicon glyphicon-question-sign	" > </span>
           				</span>
                </td>
                <td width="30%">
                    <select class="form-control" @change="init" v-model="trendSimMap.buyThreshold">
                        <option  v-for="i in 9" :value="i/100+1">{{i/100+1|formatNumberFilter(2)}}</option>
                    </select>
                </td>
                <td width="10%" align="right">

           				<span data-toggle="tooltip" data-placement="top" title="当前值低于均线，说明下跌趋势来了，就可以出售，或者再稍等等，比最近的高点低 5%，那么购买阈值就是 0.95">
            				出售阈值:<span class="glyphicon glyphicon-question-sign	" > </span>
           				</span>
                </td>
                <td width="30%">

                    <select class="form-control" @change="init"  v-model="trendSimMap.sellThreshold">
                        <option v-for="i in 10" :value="1-i/100">{{1-i/100|formatNumberFilter(2)}}</option>
                    </select>
                </td>
                <td width="10%"></td>
            </tr>
        </table>

        <br>
        <div style="text-align:center;">
            <button type="button" class="btn btn-success" @click="query">查询</button>
        </div>
        <br>

        <div class="label label-warning">收益一览</div>
        <table class="table table-striped table-bordered table-condensed">
            <thead>
            <th>投资类型</th>
            <th>投资时长 (年)</th>
            <th>1000元投资收益</th>
            <th>总收益率</th>
            <th>年化收益率</th>
            </thead>
            <tbody>
            <tr>
                <td>指数投资</td>
                <td>{{profitGlance.years|formatNumberFilter(2)}}</td>
                <td>{{(profitGlance.indexIncomeTotal+1)*1000|formatMoneyFilter}}</td>
                <td>{{profitGlance.indexIncomeTotal*100|formatNumberFilter(2)}}%</td>
                <td>{{profitGlance.indexIncomeAnnual*100|formatNumberFilter(2)}}%</td>
            </tr>
            <tr>
                <td>趋势投资</td>
                <td>{{profitGlance.years|formatNumberFilter(2)}}</td>
                <td>{{(profitGlance.trendIncomeTotal+1)*1000|formatMoneyFilter}}</td>
                <td>{{profitGlance.trendIncomeTotal*100|formatNumberFilter(2)}}%</td>
                <td>{{profitGlance.trendIncomeAnnual*100|formatNumberFilter(2)}}%</td>
            </tr>
            <tr>
                <td>相对收益</td>
                <td>n/a</td>
                <td>{{(profitGlance.trendIncomeTotal-profitGlance.indexIncomeTotal)*1000|formatMoneyFilter}}</td>
                <td>{{(profitGlance.trendIncomeTotal-profitGlance.indexIncomeTotal)*100|formatNumberFilter(2)}}%</td>
                <td>{{(profitGlance.trendIncomeAnnual-profitGlance.indexIncomeAnnual)*100|formatNumberFilter(2)}}%</td>
            </tr>
            </tbody>
        </table>

        <div class="label label-warning">交易统计</div>
        <table class="table table-bordered table-condensed">
            <thead>
            <th align="center" colspan="2">趋势投资盈亏统计</th>
            </thead>
            <tbody>
            <tr>
                <td width="50%">总共交易次数</td>
                <td>{{tradingStatistics.winCount+tradingStatistics.lossCount}}</td>
            </tr>
            <tr>
                <td>盈利交易次数</td>
                <td>{{tradingStatistics.winCount}}</td>
            </tr>
            <tr>
                <td>平均盈利比率</td>
                <td>{{tradingStatistics.avgWinRate*100|formatNumberFilter(2)}}%</td>
            </tr>
            <tr>
                <td>亏损交易次数</td>
                <td>{{tradingStatistics.lossCount}}</td>
            </tr>
            <tr>
                <td>平均亏损比率</td>
                <td>{{tradingStatistics.avgLossRate*100|formatNumberFilter(2)}}%</td>
            </tr>
            <tr>
                <td>胜率</td>
                <td>{{(tradingStatistics.winCount/(tradingStatistics.winCount+tradingStatistics.lossCount))*100|formatNumberFilter(2)}}%</td>
            </tr>
            </tbody>
        </table>

        <div class="label label-warning">交易明细</div>
        <table class="table table-striped table-bordered table-condensed table-hover">
            <thead>

            <th>盈/亏</th>
            <th>购买日期</th>
            <th>购买盘点</th>
            <th>出售日期</th>
            <th>出售盘点</th>
            <th>盈亏比率</th>
            <th>1000元投资收益</th>
            </thead>
            <tbody>
            <tr v-for="bean in tradeList">
                <td>
                    <span v-if="bean.sellClosePoint>bean.buyClosePoint" class="label label-danger">盈利</span>
                    <span v-if="bean.sellClosePoint<=bean.buyClosePoint" class="label label-success">亏损</span>
                </td>
                <td>{{bean.buyDate}}</td>
                <td>{{bean.buyClosePoint}}</td>
                <td>{{bean.sellDate}}</td>
                <td>
                    <span v-if="bean.sellClosePoint==0">n/a</span>
                    <span v-if="bean.sellClosePoint!=0">{{bean.sellClosePoint}}</span>
                </td>
                <td>
                    <span v-if="bean.sellClosePoint==0">n/a</span>
                    <span class="label"
                          v-bind:class="{ 'label-danger' : bean.sellClosePoint>bean.buyClosePoint, 'label-success' : bean.sellClosePoint<=bean.buyClosePoint }"
                          v-if="bean.sellClosePoint!=0">{{(bean.sellClosePoint-bean.buyClosePoint)*100/bean.buyClosePoint | formatNumberFilter(2)}}%</span>
                </td>
                <td>
                    <span v-if="bean.sellClosePoint==0">n/a</span>
                    <span v-if="bean.sellClosePoint!=0">{{bean.rate*1000 | formatMoneyFilter }}</span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <script>
        $(function () {
            var trendVue = {
                trendSimMap:{fundData:{id:'',code:''},startDate:'',endDate:'',maVal:5,buyThreshold:'1.01',sellThreshold:'0.99',initCash:'1000'},
                profitGlance:{},
                tradingStatistics:{winCount:'0',lossCount:'0'},
                tradeList:[],
                trendIsCurrency:false,
            };
            var trdVue = new Vue({
                el: '#trendDiv',
                data: trendVue,
                mounted: function () {

                },
                methods: {
                    query:function(){
                        trdVue.trendIsCurrency=$("#isCurrency").val();
                        if(trdVue.trendIsCurrency != "true"){
                            trdVue.getSim();
                            trdVue.pandect();
                        }else{
                            alert("货币类基金，不支持模拟趋势投资！");
                        }
                    },
                    init:function(){
                        trdVue.trendIsCurrency=$("#isCurrency").val();
                        if(trdVue.trendIsCurrency != "true"){
                            trdVue.getSim();
                            trdVue.pandect();
                        }else{
                            console.log("else");
                        }
                    },
                    getSim:function(){
                        trdVue.trendSimMap.fundData.id=$("#simSmfdId").val();
                        trdVue.trendSimMap.fundData.code=$("#simSmfdCode").val();
                        trdVue.trendSimMap.startDate=$("#simSmsd").val();
                        trdVue.trendSimMap.endDate=$("#simSmed").val();
                        trdVue.trendSimMap.maVal=$("#simSmmv").val();
                    },
                    pandect:function () {
                        var url =  "/funddatas/pandect";
                        axios.post(url,trdVue.trendSimMap).then(function(response) {
                            var result=response.data;
                            if(result.code==0){
                                trdVue.profitGlance=result.pandect.profitGlance;
                                trdVue.tradingStatistics=result.pandect.tradingStatistics;
                                trdVue.tradeList=result.pandect.tradeList;
                            }else {
                                alert(result.msg);
                            }
                        });
                    },

                }
            });
        });
    </script>
</div>